window.onload = function () {

    var blockArr = document.querySelectorAll('.block');
    var man = document.querySelector('.jump-man');
    var restart = document.getElementById('restart');


    start();

    function start() {
        restart.onclick = function () {
            funcScore();
            scoreNum=0;
            restart.style.display = "none";

            moveBlock(blockArr[0], 10, 3000);
            moveBlock(blockArr[1], 15, 4000);
            moveBlock(blockArr[2], 12, 3000);
            moveBlock(blockArr[3], 16, 3500);
            moveBlock(blockArr[4], 14, 5000);
            moveBlock(blockArr[5], 13, 4500);

        }
    }

    // 滑块移动
    function moveBlock(obj, speed, time) {
        obj.tMove = setInterval(function () {
            // 滑块移动，移动的同时检测是否碰撞
            move(obj, "left", -20, speed, check(obj));
            // 每次移动之后返回起点重新开始
            obj.style.left = 800 + "px";
        }, time);

        // 游戏结束之后关闭了定时器，故每次点击开始时需要重新打开
        setInterval(obj.tMove);
        setInterval(obj.tCheck);
    }

    // 碰撞检测
    function check(obj) {
        // 开启一个定时器，每隔10ms判断是否碰撞
        obj.tCheck = setInterval(function () {
            // 如果碰撞，则显示按钮，并关闭定时器
            if (checkCollision(obj, man)) {
                restart.style.display = "block";
                clearInterval(obj.tCheck);
                clearInterval(obj.tMove);
                clearInterval(tScore);
            }
        }, 10)
        obj.style.left = 800 + "px";
    }

    // 键盘空格相应人物跳起
    document.onkeydown = function (event) {
        if (event.keyCode == 32) {
            move(man, "top", 80, 10, function () {
                move(man, "top", 200, 5);
            })
        }
    }

    // 计算分数
    var score = document.querySelector('.score');
    var scoreNum = 0;
    var tScore;
    function funcScore() {
        tScore = setInterval(function () {
            scoreNum++;
            score.innerHTML = "分数："+ scoreNum;
        }, 1000);
    }

    // 碰撞检测
    function checkCollision(obj1, obj2) {
        var left1 = parseInt(window.getComputedStyle(obj1, false).left);
        var left2 = parseInt(window.getComputedStyle(obj2, false).left);

        var top1 = parseInt(window.getComputedStyle(obj1, false).top);
        var top2 = parseInt(window.getComputedStyle(obj2, false).top);

        var width1 = parseInt(window.getComputedStyle(obj1, false).width);
        var width2 = parseInt(window.getComputedStyle(obj2, false).width);

        var height1 = parseInt(window.getComputedStyle(obj1, false).height);
        var height2 = parseInt(window.getComputedStyle(obj2, false).height);

        var center1 = {
            x: left1 + width1 / 2,
            y: top1 + height1 / 2
        }
        var center2 = {
            x: left2 + width2 / 2,
            y: top2 + height2 / 2
        }

        var diffX = Math.abs(center1.x - center2.x);
        var diffY = Math.abs(center1.y - center2.y);

        if (diffX < (width1 + width2) / 2 && diffY < (height1 + height2) / 2) {
            return true;
        }
        return false;
    }

    // 创建一个可以执行简单动画的函数
    // 参数：
    // obj 执行动画的对象
    // attr 要执行动画的样式，如left top width
    // target 执行动画的目标位置
    // speed 移动的速度(只需要传正数)
    // callback 回调函数，在动画执行完之后执行

    function move(obj, attr, target, speed, callback) {
        // 关闭上一个动画的定时器
        clearInterval(obj.timer);
        var current = parseInt(getStyle(obj, attr));

        // 判断速度的正负值
        if (current > target) {
            speed = -speed;
        }

        // 向执行动画的对象中添加一个timer属性，用来保存自己的定时器标识
        obj.timer = setInterval(function () {

            // 获取box1原来的值
            var oldValue = parseInt(getStyle(obj, attr));

            // 在旧值的基础上增加
            var newValue = oldValue + speed;

            if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                newValue = target;
            }

            obj.style[attr] = newValue + "px";

            if (newValue == target) {
                clearInterval(obj.timer);

                // 调用回调函数
                callback && callback();
            }

        }, 30);
    }

    // 获取指定元素的当前样式
    // 参数：
    // obj 要获取样式的元素
    // name 要获取的样式名
    function getStyle(obj, name) {
        if (window.getComputedStyle) {
            return getComputedStyle(obj, null)[name];
        }
        else {
            return obj.currentStyle[name];
        }
    }

    var backBtn = document.querySelector('.back');
    backBtn.onclick = function(){
        window.location.href = "../mainPage/mainPage.html"
    }


}





